<template>
	<view class="shop-detail">
		<swiper class="swiper" circular :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-if="commodityData.fields" v-for="img in commodityData.fields.gallery">
				<image class="swiper-image" :src="'http://127.0.0.1:8002/' + img"></image>
			</swiper-item>
		</swiper>
		<view class="shop-name">{{commodityData.fields ? commodityData.fields.name : 'Loading...'}}</view>
		<view class="params">
			<view class="param">价格：{{commodityData.fields ? commodityData.fields.price : 'Loading...'}}</view>
			<view class="param">库存：{{commodityData.fields ? commodityData.fields.stock : 'Loading...'}}</view>
		</view>
		
		<view class="detail" v-html="commodityData.fields ? commodityData.fields.detail : 'Loading...'">
			
		</view>
		<view class="blank">
			
		</view>
	</view>
</template>


<script>
	export default {
		props: {
			commodityData: {},
		},
		data() {
			return {
			}
		},
	}
</script>

<style>
	.shop-detail .shop-name ,
	.detail{
		font-weight: 900;
		line-height: 20px;
		padding: 0 20px;
	}

	.shop-detail .params {
		padding: 20px;
		display: flex;
		flex-wrap: wrap;
	}

	.shop-detail .params .param {
		width: 50%;
		line-height: 40px;
	}

	.shop-detail .blank{
		height: 120rpx;
	}

	.swiper {
		width: 100%;
		height: 410px;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}
</style>
